<template>
    <div>
        <van-nav-bar left-text="购物车" left-arrow @click-left="onClickLeft" />
        <van-checkbox-group v-model="result" ref="box">
            <van-swipe-cell v-for="item in $store.state.shoplist" :key="item.id">
                <van-row>
                    <van-col span="4">
                        <van-checkbox :name="item" @click="checkall"></van-checkbox>
                    </van-col>

                    <van-col span="20">
                        <van-card :price="item.price" :title="item.title">
                            <template #thumb>
                                <img v-lazy="item.pic">
                            </template>
                            <template #footer>
                                <van-stepper v-model="item.num" @plus="plus(item._id)" @minus="minus(item._id)" />
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button remove" @click="del(item.id)" />
                </template>
            </van-swipe-cell>
        </van-checkbox-group>
        <van-submit-bar :price="sum*100" button-text="提交订单">
            <van-checkbox v-model="checked" @click="checkCheckbox">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                result: [],
                checked: false,
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },

            del(id) {
                this.$store.commit("del", id),
                    this.result.forEach((item, index) => {
                        if (item.id == id) {
                            this.result.splice(index, 1);
                        }
                    });
                this.checkall()
            },
            plus(id) {
                this.$store.commit("plus", id)
            },
            minus(id) {
                this.$store.commit("minus", id)
            },
            checkall() {
                if (this.result.length == this.$store.state.shoplist.length && this.$store.state.shoplist.length != 0) {
                    this.checked = true;

                } else {
                    this.checked = false
                }
            },
            checkCheckbox() {
                this.$refs.box.toggleAll(this.checked)
            }
        },
        computed: {
            sum() {
                let prices = 0;
                this.result.forEach((item) => {
                    prices += item.price * item.num;
                })
                return prices;
            }
        }
    }
</script>
<style lang="scss">
    .remove {
        height: 100% !important;
    }

    .van-goods-action {
        bottom: 50px !important
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>